<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<script>
    // 使用observableArray
    const arr = observableArray([]);

    function observableArray(arr) {
        const handler = {
            get(target, propKey, receiver) {
                return Reflect.get(target, propKey, receiver);
            },
            set(target, propKey, value, receiver) {
                const result = Reflect.set(target, propKey, value, receiver);
                if (propKey === 'length' || propKey >= target.length) {
                    console.log('数组长度被修改了', propKey, value);
                } else {
                    console.log('数组元素被修改了', propKey, value);
                }
                return result;
            }
        };

        return new Proxy(arr, handler);
    }

    // arr[1] = 20; // 控制台会输出：数组元素被修改了 1 20
    // arr.length = 2; // 控制台会输出：数组长度被修改了 length 2
    setTimeout(() => {
        arr.push(1)
    }, 3000)
</script>
